<template>
  <div class="container">

      <!-- 添加用户按钮和搜索框 -->
      <div class="search-container">
        <el-input v-model="searchKeyword" placeholder="搜索订单" clearable @keyup.enter.native="searchUsers" class="search-input"></el-input>
      </div>

    <!-- 使用 Element UI 的表格组件 -->
    <el-table :data="filteredData" style="width: 100%">
      <el-table-column prop="rid" label="订单编号"></el-table-column>
      <el-table-column prop="uid" label="用户编号"></el-table-column>
      <el-table-column prop="uname" label="用户姓名"></el-table-column>
      <el-table-column prop="rtime" label="预约时间"></el-table-column>
      <el-table-column prop="eid" label="员工ID">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ empList.find(item => item.eid === scope.row.eid).ename }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tid" label="技术类型">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ projectList.find(item => item.tid === scope.row.tid).tname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="预约状态">
        <template slot-scope="scope">
          已经预约
        </template>
      </el-table-column>
      <el-table-column prop="pid" label="项目类型">
        <template slot-scope="scope">
          {{ scope.row.pid === 1 ? '美容項目' : '美发项目' }}
        </template>
      </el-table-column>
      <el-table-column prop="way" label="支付方式">
        <template slot-scope="scope">
          {{ scope.row.paymentType === 1 ? '支付宝' : '会员卡' }}
        </template>
      </el-table-column>
      <el-table-column prop="money" label="金额"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="dodelete(scope.row.rid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 使用 Element UI 的分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pagebean.total"
      :page-size="pagebean.pagesize"
      :current-page="pagebean.pagenow"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>
<script>
import axios from 'axios';
import qs from 'qs';

export default {
  data() {
    return {
      reservation: {},
      pagebean: {
        total: 0,
        pagesize: 2,
        pagenow: 1,
        data: []
      },
      searchKeyword: '', // 存储搜索关键词
      filteredData: [], // 存储过滤后的数据
      projectList: [],
      empList: []
    };
  },
  created() {
    this.doload();
    this.searchTechnology();
    this.searchEmp();
  },
  methods: {
    handleCurrentChange(val) {
      this.pagebean.pagenow = val;
      this.doload();
    },
    doload() {
      const that = this;
      this.$axios.get(`http://localhost:9990/reservation/${this.pagebean.pagenow}/${this.pagebean.pagesize}`)
        .then(response => {
          that.pagebean = response.data;
          that.filteredData = response.data.data; // 初始化过滤后的数据
        });
    },
    dodelete(rid) {
      const that = this;
      this.$axios.delete(`http://localhost:9990/reservation/${rid}`)
        .then(() => {
          that.doload();
        });
    },
    searchUsers() {
      // 过滤数据
      this.filteredData = this.pagebean.data.filter(reservation => {
        return (
          reservation.rid.includes(this.searchKeyword) ||
          reservation.uid.includes(this.searchKeyword) ||
          reservation.uname.includes(this.searchKeyword) ||
          reservation.rtime.includes(this.searchKeyword) ||
          reservation.eid.includes(this.searchKeyword) ||
          reservation.tid.includes(this.searchKeyword) ||
          reservation.state.includes(this.searchKeyword) ||
          reservation.pid.includes(this.searchKeyword) ||
          reservation.way.includes(this.searchKeyword) ||
          reservation.money.includes(this.searchKeyword)
        );
      });
    },
    searchTechnology() {
      const that = this;
      this.$axios.get(`http://localhost:9990/technology-list`)
        .then(response => {
          that.projectList = response.data;
        });
    },
    searchEmp() {
      const that = this;
      this.$axios.get(`http://localhost:9990/emp`)
        .then(response => {
          that.empList = response.data;
        });
    }
  }
};
</script>
<style scoped>
/* 添加用户按钮 */
.add-user-button {
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.3s ease;
  display: inline-flex; /* 改为 inline-flex */
  align-items: center; /* 居中对齐文本 */
  margin-right: 10px; /* 右侧间距 */
  margin-bottom: 20px;
}

/* 搜索框 */
.search-input {
  display: inline-block;
  width: 1030px; /* 调整宽度 */
  margin-bottom: 20px;
}

/* 搜索容器 */
.search-container {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-start; /* 靠左对齐 */
  margin-bottom: 20px; /* 底部间距 */
}

/* 鼠标悬停时的效果 */
.add-user-button:hover {
  background-color: #409EFF; /* 更深一点的蓝色 */
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 按钮被激活时的效果 */
.add-user-button:active {
  background-color: #3A8EE6; /* 更深一点的蓝色 */
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.el-dialog__title {
  font-size: 18px;
  color: #303133;
}

.el-dialog__body {
  padding: 20px 20px 0;
}
/* 输入框样式 */
.el-input {
  width: 100%;
}



/* 对话框底部 */
.dialog-footer {
  text-align: right;

}

/* 输入框内部样式 */
.el-input__inner {
  font-size: 16px;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 读只输入框样式 */
.el-input--is-disabled .el-input__inner {
  background-color: #f5f7fa;
  cursor: not-allowed;
  color: #c0c4cc;
}
</style>
